<template>
    <div class="my_content  h-full flex flex-col">
        <div class="colorFFF">
            <Tabs title="不同通行方式人员占比" class="flex-none">
                <template #btn>
                    <div style="width: 10rem"></div>
                </template>
            </Tabs>
        </div>
        <div id="echarts_personnel_first" class="flex-1"></div>
    </div>
</template>

<script>
import * as echarts from 'echarts';
import { debounce } from 'lodash';
import { gatewayRateStatistics } from "src/api/screenDevice";
import Tabs from "./Tabs.vue"
export default {
    name: "RightProportionPersonnel",
    components: { Tabs },
    inject: ['villageId'],
    data() {
        return {
            datas: [
                {
                    name: '二维码',
                    value: 0,
                },
                {
                    name: '人脸识别',
                    value: 0
                },
                {
                    name: '一卡通',
                    value: 0
                },
                {
                    name: '远程开锁',
                    value: 0
                }
            ]
        }
    },
    mounted() {
        this.initEcharts();
        this.setIntervalTotalFn()
    },
    destroyed() {
        clearInterval(this.timer);
        this.timer = null;
        this.myCharts && this.myCharts.dispose()
    },
    methods: {
        setIntervalTotalFn() {
            const villageId = this.villageId
            if (villageId) {
                this.timer = null;
                this.timer = setInterval(() => {
                    this.gatewayRateStatistics(villageId);
                }, 20000);
            }
        },
        gatewayRateStatistics(villageId) {
            gatewayRateStatistics({ villageId: villageId }).then(res => {
                if (res.success == true) {
                    let sum = (res.data.qrCountRate+res.data.faceCountRate+res.data.cardCount+res.data.controllerCountRate)
                    this.datas[0].value =res.data.qrCountRate && (res.data.qrCountRate/sum*100).toFixed(0) || 0;
                    this.datas[1].value =res.data.faceCountRate && (res.data.faceCountRate/sum*100).toFixed(0) || 0;
                    this.datas[2].value = res.data.cardCount && (res.data.cardCount/sum*100).toFixed(0) || 0;
                    this.datas[3].value = res.data.controllerCountRate && (res.data.controllerCountRate/sum*100).toFixed(0) || 0;
                    this.updateEcharts()
                }
            })
        },
        // 初始化echarts
        initEcharts() {
            this.myCharts && this.myCharts.dispose()
            let myCharts = echarts.init(document.getElementById('echarts_personnel_first'));
            gatewayRateStatistics({ villageId: this.villageId }).then(res => {
                if (res.success == true) {
                    let sum = (res.data.qrCountRate+res.data.faceCountRate+res.data.cardCount+res.data.controllerCountRate)
                    this.datas[0].value = res.data.qrCountRate && (res.data.qrCountRate/sum*100).toFixed(0) || 0
                    this.datas[1].value = res.data.faceCountRate && (res.data.faceCountRate/sum*100).toFixed(0) || 0;
                    this.datas[2].value = res.data.cardCount && (res.data.cardCount/sum*100).toFixed(0) || 0;
                    this.datas[3].value = res.data.controllerCountRate && (res.data.controllerCountRate/sum*100).toFixed(0) || 0;
                    let data = this.datas
                    let colors = ["#BB8E34", "#BB964D", "#CDAF73", "#F0D090"]
                    var option = {
                        tooltip: {
                            show: true,
                            trigger: 'item',
                            // formatter: '{a} <br/>{b} : {c} ({d}%)'
                        },
                        legend: {
                            orient: "vertical",
                            y: 'center',
                            x: '2%',
                            itemGap: 16,
                            itemWidth: 12,
                            itemHeight: 12,
                            // 使用回调函数
                            formatter: function (name) {
                                let obj = data.find(x => x.name == name)
                                let value = obj ? obj.value : 0
                                // let abs = c ? '{c|  %}' : '0%';
                                return '{a|' + name + '}' + " " + '{b|' + value + '}' + '{c|  %}';
                            },
                            textStyle: {
                                fontSize: 10,
                                color: '#999',
                                rich: {
                                    a: {
                                        color: '#A79980',
                                        width: 80
                                    },
                                    b: {
                                        color: '#FBE5BB',
                                        fontSize: 20
                                    },
                                    c: {
                                        color: '#857B68',
                                        width: 10
                                    }
                                }
                            },
                        },
                        color: colors,
                        series: [
                            {
                                name: '通行方式人员占比',
                                type: 'pie',
                                radius: [20, 70],
                                center: ['70%', '50%'],
                                roseType: 'radius',
                                // hoverAnimation:false,
                                itemStyle: {
                                    borderRadius: 4
                                },
                                label: {
                                    show: false,
                                    color: ["#BB8E34", "#BB964D", "#CDAF73", "#F0D090"],
                                    formatter:'({d}).toFixed(0)%',
                                },

                                emphasis: {
                                    label: {
                                        show: true,
                                        formatter:'{d}%',
                                    },
                                    labelLine: {
                                        show: true,
                                        lineStyle: {
                                            color: '#BB8E34'
                                        }
                                    },
                                },
                                data: this.datas
                            }
                        ]
                    }
                    myCharts.setOption(option);
                    const f = debounce(function () {
                        if (myCharts.isDisposed()) {
                            window.removeEventListener('resize', f)
                        } else {
                            myCharts.resize();
                        }
                    }, 500)
                    window.addEventListener('resize', f)
                    this.myCharts = myCharts
                }
            })
        },
        updateEcharts() {
            this.option = {
                series: [
                    { data: this.datas }
                ]

            }

        }
    }
}
</script>

<style scoped lang="scss">
.my_content {
    width: 100%;
    height: 95%;
}
</style>